<template>
  <div id="index">
    <div class="filter-container vux-1px-b flex flex-middle" ref="filter">
      <div class="flex-auto" @click="modal = true" v-if="serverID == 6">
        {{ actionsheets }}<i class="icon icon-down"></i>
      </div>
      <div v-if="serverID == 7 || serverID == 8" class="vux-1px-r flex flex-auto">
        <div @click="showCity = true" class="flex-auto flex flex-middle" style="justify-content: center; padding: 0rem 0.1rem;">
          <div class="overflowtext">{{ city }}</div> <i class="icon icon-down2"></i>
        </div>
        <div style="margin: 0rem 0.2rem;">
          <i class="icon icon-qiehuan" style="font-size: 0.24rem;"></i>
        </div>
        <div @click="showCity2 = true" class="flex-auto flex flex-middle" style="justify-content: center;padding-right: 0.1rem;">
          <div class="overflowtext">{{ city2 }}</div> <i class="icon icon-down2"></i>
        </div>
      </div>
      <div v-if="serverID == 8" style="width: 1rem;" @click="showCar = true">
        <i class="icon icon-filter" style="text-align: center; font-size: 0.34rem;"></i>
      </div>
    </div>
    <div ref="pensonbox" style="position: relative;">
      <scroller
        :on-refresh="refresh"
        :on-infinite="infinite"
        :noDataText="orderData.length? '我已经到底了~~': ''"
       >
        <div class="bj-item" v-for="item in orderData">
          <div @click="toDetail(item.id, item.verify)">
            <div class="title flex flex-middle flex-space-between">
              <div class="flex flex-middle">
                <i class="icon icon-shijian" style="font-size: 0.34rem"></i>
                <span>{{item.pick_up_time}}前取货</span>
              </div>
              <div class="text-orange">{{item.pick_up}}</div>
            </div>

            <div class="info">
              <div class="item overflowtext">
                <i class="icon icon-ziyuan21"></i>
                <span class="addressname">{{item.p_addr}} {{item.p_addr_more}}</span>
              </div>
              <div class="item overflowtext">
                <i class="icon icon-ziyuan11"></i>
                <span class="addressname">{{item.q_addr}} {{item.q_addr_more}}</span>
              </div>
              <div class="item overflowtext" style="margin-bottom: 0rem">
                <i class="icon icon-Ankerwebicon-"></i>
                <span>
                  {{item.service || '' }} {{item.goods_list || '' }}{{item.goods_info  || ''}}
                  <span v-if="item.weight > 0">{{item.weight}}{{item.unit}}</span>
                  <span v-if="item.volume > 0">{{item.volume}}方</span>
                  <span v-if="item.number > 0">{{item.number}}件</span>
                  {{ item.package || '' }}
                </span>
                <i class="icon icon-image" v-if="item.goods_img1 || item.goods_img2" style="color: #2d8cf0;"></i>
              </div>
              <div class="item overflowtext">
                <i class="icon icon-che" v-if="serverID != 7" style="font-size: 0.36rem"></i>
                <i class="icon icon-dingdan" v-if="serverID == 7" style="font-size: 0.36rem"></i>
                <span>
                {{item.car_id || ''}}
                {{item.car_length || ''}}
                {{item.extra_need  || ''}}
                {{item.has_certificate || ''}}
                {{item.remark || ''}}
              </span>
              </div>
            </div>
          </div>

          <div class="action flex flex-middle flex-space-between">
            <div class="text-orange">
              <clocker :time="item.deadline" format="%D 天 %H : %M : %S"></clocker>
            </div>
            <div>
              <x-button v-if="item.verify == 0" type="primary" @click.native="toDetail(item.id, item.verify)" action-type="button" class="out-line" mini>
                立即报价
              </x-button>
              <span class="text-orange" v-if="item.verify == 1">已报价</span>
              <span class="text-orange" v-if="item.verify == 2">已报价</span>
            </div>
          </div>
        </div>

      </scroller>
      <div class="null" v-if="!orderData.length && !isLoading">
        <img src="../../../static/img/nullorder.png" style="height: 2.95rem; width: 3.3rem;">
        <p>货源已被抢光,过会下拉刷新看看~~</p>
      </div>
    </div>


    <div v-transfer-dom>
      <popup v-model="showCity">
        <div class="popup0">
          <div class="picker-btn">
            <div style="height: 0.9rem; padding-right: 0.5rem;" @click="showCity = false">取消</div>
            <div style="color: #222; font-size: 0.32rem;">选择所在地区</div>
            <div class="text-orange" style="height: 0.9rem;padding-left: 0.5rem;" @click="handlePickerCity">确定</div>
          </div>
          <picker :data="area" :columns=3 :fixed-columns=3 v-model="ssq" ref="pickerarea"></picker>
        </div>
      </popup>
    </div>
    <div v-transfer-dom>
      <popup v-model="showCity2">
        <div class="popup0">
          <div class="picker-btn">
            <div style="height: 0.9rem; padding-right: 0.5rem;" @click="showCity2 = false">取消</div>
            <div style="color: #222; font-size: 0.32rem;">选择所在地区</div>
            <div class="text-orange" style="height: 0.9rem;padding-left: 0.5rem;" @click="handlePickerCity2">确定</div>
          </div>
          <picker :data="area" :columns=3 :fixed-columns=3 v-model="ssq2" ref="pickerarea2"></picker>
        </div>
      </popup>
    </div>
    <div v-if="serverID == 8" class="amap-wrapper" :class="{'amap-wrapper-show': showCar}" :style="{minHeight: $store.state.bodyHeiht}">
      <car
        @on-cancle="showCar = false"
        @on-submit="carSub"
        serverid="8"
        @on-clear="carClear"
        type="chengjizhengche"
        :load="showCar"
      ></car>
    </div>
    <actionsheet v-model="modal" :menus="actionsheetList" @on-click-menu="handleActionsheetModal"></actionsheet>
  </div>
</template>
<script>
  import { getDateDiff, get_time_format } from '../../libs/until'
  import { setObjectVal, removeByValue } from '../../libs/fn'
  import { Clocker, TransferDom } from 'vux'
  export default{
    directives: {
      TransferDom
    },
    components: {
      Clocker,
      Car: resolve => {require(['../../components/realTag/Car.vue'], resolve)}
    },
    computed: {
      serverID() {
        return this.$store.state.userInfo.service_id || 0
      },
      scrollerMarTop() {
        const u = navigator.userAgent
        const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
        return isAndroid? '-0.2rem': '0rem'
      },
      filterItemUri() {
        const { service_id } = this.$store.state.userInfo
        if(service_id == 6) {
          this.$store.commit('setOrderType', 'zhuanche')
          return $config.host + '/api/Inquirycitycar/getQuotesCityCar'
        } else if(service_id == 7) {
          this.$store.commit('setOrderType', 'zhuanxian')
          return $config.host + '/api/Inquiryzerobear/getQuotesZeroBear'
        } else if(service_id == 8) {
          this.$store.commit('setOrderType', 'zhengche')
          return $config.host + '/api/Inquirycityvehicle/capacityDriverOrder'
        }
      }
    },
    created() {
      this.getData()
      if(this.serverID == 6) {
        this.getServiceType()
      } else {
        this.$http.get('../../static/area2.json').then((res) => {
          this.area = res.data
        })
      }
    },
    mounted() {
      const bodyHeight = document.documentElement.clientHeight
      const searchHeight = this.$refs['filter'].offsetHeight
      const pensonHeight = bodyHeight - searchHeight
      this.$refs['pensonbox'].style.height = pensonHeight + 'px'
    },
    data() {
      return {
        isLoading: true,
        nullMsg: '暂无数据',
        actionsheetList: [],
        actionsheets: '全部',
        showCar: false,
        car: { //车辆需求
          value: [],
          name: [],
          id: [],
          type: []
        },
        carLength: { //车型需求
          value: [],
          name: [],
          id: [],
          type: []
        },
        modal: false,
        area: [],
        showCity: false,
        ssq: [],
        city: '全国',
        showCity2: false,
        ssq2: [],
        city2: '全国',
        filterItem: {
          page: 1,
          pagesize: 10,
          car_id: '',
          car_length: '',
          outset: '',
          finish: '',
          line: '',
          client: $config.client_type,
          device: $config.device_type,
          token: this.$store.state.userInfo.token,
          uid: this.$store.state.userInfo.uid
        },
        pages: 0,
        orderData: []
      }
    },
    methods: {
      //车型需求删除已选中
      carClear(v, v1) {
        const data = setObjectVal(v)
        const data1 = setObjectVal(v1)
        this.car = data
        this.carLength = data1
        this.filterItem.car_id = this.car.id[0]
        this.filterItem.car_length = this.carLength.id[0]
        this.pages = 0
        this.filterItem.page = 1
        this.orderData = []
        this.getData()
      },
      //车型需求数据回传
      carSub(v, v1) {
        this.carClear(v, v1)
        this.showCar= false
      },
      getServiceType() {
        this.$http.post($config.host + '/api/Inquirycitycar/getService', qs.stringify({
          client: $config.client_type,
          device: $config.device_type,
          token: this.$store.state.userInfo.token,
          uid: this.$store.state.userInfo.uid
        })).then((res) => {
          const {code, data, msg} = res.data
          if(code == '1' && data.data_list) {
            data.data_list.map(item => {
              this.actionsheetList.push({
                label: item.name,
                value: item.id + ''
              })
            })
          }
        })
      },
      // 选择联动
      handlePickerCity() {
        let area = this.$refs.pickerarea && this.$refs.pickerarea.getNameValues()
        let areaArr = area.split(' ')
        const len = areaArr.length - 1
        this.city = areaArr[len]
        this.filterItem.outset = this.ssq[len]
        this.showCity = false
        this.pages = 0
        this.filterItem.page = 1
        this.orderData = []
        this.getData()
      },
      // 选择联动
      handlePickerCity2() {
        let area = this.$refs.pickerarea2 && this.$refs.pickerarea2.getNameValues()
        let areaArr = area.split(' ')
        const len = areaArr.length - 1
        this.city2 = areaArr[len]
        this.filterItem.finish = this.ssq2[len]
        this.showCity2 = false
        this.pages = 0
        this.filterItem.page = 1
        this.orderData = []
        this.getData()
      },
      handleActionsheetModal(val) {
        this.filterItem.car_id = val
        this.pages = 0
        this.filterItem.page = 1
        this.orderData = []
        const pet = this.actionsheetList.find(pet => pet.value == val)
        this.actionsheets = pet.label
        this.getData()
      },
      infinite(done) {
        if(this.filterItem.page >= this.pages) {
          done(true)
          return
        }
        if(!this.isLoading) {
          this.isLoading = true
          this.filterItem.page += 1
          this.getData(done)
        }

      },
      refresh(done) {
        this.pages = 0
        this.filterItem.page = 1
        setTimeout(() => {
          this.nullMsg = ''
          //this.orderData = []
          this.getData(done(), 'refresh')
        }, 500)

      },
      getData(done = () => {}, refresh = '') {
        this.isLoading = true
        this.$http.post(this.filterItemUri, qs.stringify(this.filterItem)).then((res) => {
          const {code, data, msg} = res.data
          if(code == '1' && data) {

            this.filterItem.page = parseInt(data.page)
            this.pages = parseInt(data.pages)
            //刷新删除所有的数据
            data.data.map(item => {
              item.pick_up_time = get_time_format(item.pick_up_time)
              item.pick_up = getDateDiff(item.pick_up)
              item.deadline = get_time_format(item.deadline)
            })
            this.orderData = this.filterItem.page == 1? data.data || []: [...orderData, ...data.data]


          } else if (code == '3') {
            this.$vux.toast.text($config.loginErrMsg, 'middle')
            this.$router.push({path: '/logout'})
          } else {
            this.nullMsg = msg
          }
          done()
          this.isLoading = false
        }).catch((err) => {
          done()
          this.isLoading = false
          this.$vux.toast.text($config.errMsg, 'middle')
        })
      },

      toDetail(oid,verify) {
        this.$router.push({name: 'inDispatch', query: {oid,verify, hadUid: 0}})
      }
    }
  }
</script>
<style>
  .bj-item {
    margin-bottom: 0.3rem;
    box-shadow: 0px 0px 0.1rem rgba(0,0,0,0.1);
    background: #fff;
    padding: 0rem 0.2rem;
  }
  .bj-item .title{
    height: 1rem;
    border-bottom: 1px solid #eee;
    margin-bottom: 0.2rem;
  }
  .bj-item .icon{
    font-size: 0.3rem;
    display: inline-block;
    margin-right: 0.12rem;
    height: 0.5rem;
    width: 0.5rem;
    text-align: center;
  }
  .icon-ziyuan21, .icon-ziyuan11{
    display: inline-block;
    border: 1px solid #f3532c;
    border-radius: 50%;
    color: #f3532c;
  }
  .addressname{
    color: #222;
    font-size: 0.3rem;
  }
  .bj-item .action{
    border-top: 1px solid #eee;
    margin-top: 0.2rem;
    padding: 0.12rem 0rem;
  }
  .bj-item .info .item{
    margin-bottom: 0.12rem;
  }
  .null{
    text-align: center;
    margin-top: 1.4rem;
  }
  .filter-container{
    height: 0.9rem;
    background: #fff;
    box-shadow: 0px 0px 0.1rem rgba(0,0,0,0.1);
    text-align: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 8;
  }
  .filter-container .icon{
    font-size: 0.22rem;
    color: #999;
  }
</style>
